<template>
	<view class="page">
		<!-- 蓝色背景区域 -->
		<view class="blue-background">
			<view class="success-message">
				<text class="success-text">支付成功,请您前往指定门店消费</text>
			</view>
			<view class="store-info">
				<image class="store-icon" src="/static/车联网服务-01专业洗车-05洗车-订单详情_slices/商家.png" mode="aspectFit"></image>
				<view class="store-details">
					<text class="store-name">伟业汽车美容店(人民路店)</text>
					<text class="store-address">山阳区人民中路33号</text>
				</view>
				<image class="plane-icon" src="/static/车联网服务-01专业洗车-05洗车-订单详情_slices/plane.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 主内容容器 -->
		<view class="main-content">
			<!-- 订单详情卡片 -->
			<view class="order-details-card">
				<view class="card-header">
					<text class="card-title">订单详情</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">车辆精洗</text>
					<text class="detail-value">¥ 39.90</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">车辆附加费用</text>
					<text class="detail-value">0</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">原价</text>
					<text class="detail-value">¥ 59.90</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">店家优惠</text>
					<text class="detail-value discount">- ¥ 20</text>
				</view>
				<view class="detail-row">
					<text class="detail-label">优惠券</text>
					<text class="detail-value discount">- ¥ 10</text>
				</view>
				<view class="detail-row total-row">
					<text class="detail-label">支付金额</text>
					<text class="detail-value payment-amount">¥ 29.9</text>
				</view>
			</view>
			
			<!-- 订单信息卡片 -->
			<view class="order-info-card">
				<view class="card-header">
					<text class="card-title">订单信息</text>
				</view>
				<view class="info-row">
					<text class="info-label">订单号:</text>
					<text class="info-value">121212112487878</text>
				</view>
				<view class="info-row">
					<text class="info-label">下单时间:</text>
					<text class="info-value">2020.01.08 17:40</text>
				</view>
				<view class="info-row">
					<text class="info-label">车辆:</text>
					<text class="info-value">奔驰FWE4/豫A98FHJ</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		position: relative;
	}
	
	/* 蓝色背景区域 */
	.blue-background {
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		padding: 40rpx 0 60rpx;
	}
	
	.success-message {
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		margin-left: 20rpx;
	}
	
	.success-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: normal;
	}
	
	.store-info {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
				margin-left: 20rpx;
	}
	
	.store-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}
	
	.store-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.store-name {
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.store-address {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
	}
	
	.plane-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	/* 主内容容器 */
	.main-content {
		position: absolute;
		top: 220rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		max-width: 750rpx;
		z-index: 10;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	/* 订单详情卡片 */
	.order-details-card {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		overflow: hidden;
	}
	
	/* 订单信息卡片 */
	.order-info-card {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		overflow: hidden;
	}
	
	.card-header {
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.card-title {
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.detail-row:last-child {
		border-bottom: none;
	}
	
	.detail-label {
		color: #333333;
		font-size: 30rpx;
	}
	
	.detail-value {
		color: #333333;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.detail-value.discount {
		color: #ff4444;
	}
	
	.total-row {
		background: #f8f9fa;
	}
	
	.payment-amount {
		color: #4CAF50;
		font-size: 32rpx;
		font-weight: 700;
	}
	
	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.info-row:last-child {
		border-bottom: none;
	}
	
	.info-label {
		color: #666666;
		font-size: 30rpx;
	}
	
	.info-value {
		color: #333333;
		font-size: 30rpx;
	}
</style>
